<template>
	<view class="top">
		<uni-card style="border-radius: 10px;margin-top: 0px;height: 300px;">
			
				<view class="input-container">
				    <img class="img1" src="../../../static/images/ly/手机号.png" alt="Search Icon">
				    <input type="text" placeholder="请输入手机号">
					<img class="img2" src="../../../static/images/ly/组 5.png" alt="Search Icon">
				</view>
				<view class="yanzheng">
				<view class="input-container2">
				    <img class="img1" src="../../../static/images/ly/验证码.png" alt="Search Icon">
				    <input type="text" placeholder="请输入验证码">
				</view>
			<button class="button" type="primary">获取验证码</button>
			</view>
			<button class="button2" type="primary">提交</button>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.top {
		height: 150px;
		background-image: url(../../../static/images/ly/组 6.png);

	}
	 .input-container {
	        position: relative;
	        display: inline-block;
			margin-top: 20px;
	    }
	    .input-container input {
	        padding-left: 30px; /* 留出空间给图标 */
			height: 45px;
			width: 270px;
			background-color: #F2F2F2;
			border-radius: 20px;
	    }
	    .img1 {
	        position: absolute;
	        left: 8px; /* 调整图标位置 */
	        top: 50%;
	        transform: translateY(-50%); /* 垂直居中图标 */
	        width: 16px; /* 图标大小 */
	        height: 20px;
	    }
		.img2{
			position: absolute;
			right: 8px; /* 调整图标位置 */
			top: 50%;
			transform: translateY(-50%); /* 垂直居中图标 */
			width: 16px; /* 图标大小 */
			height: 20px;
		}
		
		.input-container2 {
		       position: relative;
		       display: inline-block;
			   
		   }
		   .input-container2 input {
		       padding-left: 30px;
			   height: 45px;
			   width: 150px;
			   background-color: #F2F2F2;
			   border-radius: 20px;
			   
		   }
		   .button {
		   	height: 40px;
		   	width: 110px;
		   	font-size: 15px;
		   	background-color: #3486FD;
		   	border-radius: 20px;
		   	display: flex;
		   	justify-content: center;
		   	align-items: center;
		   	margin-top: 8px;
		   }
		   .yanzheng{
			   display: flex;
			   align-items: center;
			   margin-top: 15px;
		   }
		   .button2{
			   height: 30px;
			   width: 250px;
			   font-size: 15px;
			   background-color: #3486FD;
			   border-radius: 20px;
			   display: flex;
			   justify-content: center;
			   align-items: center;
			   margin-top: 40px;
		   }
</style>
